<template>
  <div>
    <div class="navbar">
      <block v-for="(item,index) in tabs" :key="index">
        <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
          <div class="navbar_title">{{item.name}}</div>
        </div>
      </block>
      <div class="navbar_slider" :class="navbarSliderClass"></div>
    </div>
    <div>
      <div :hidden="activeIndex != 0">选项一的内容</div>
      <div :hidden="activeIndex != 1">选项二的内容</div>
      <div :hidden="activeIndex != 2">选项三的内容</div>
      <div :hidden="activeIndex != 3">选项三的内容</div>
      <div :hidden="activeIndex != 4">选项三的内容</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [
          {
            name: "推荐",
            type: "1",
            checked: true
          },
          {
            name: "美食",
            type: "2",
            checked: true
          },
          {
            name: "情歌",
            type: "3",
            checked: true
          },
          {
            name: "搞笑",
            type: "4",
            checked: true
          },
          {
            name: "祝福",
            type: "5",
            checked: true
          }
        ],
        activeIndex: 0,
        listData:[],
      };
    },
    computed: {
      navbarSliderClass() {
        if (this.activeIndex == 0) {
          return "navbar_slider_0";
        }
        if (this.activeIndex == 1) {
          return "navbar_slider_1";
        }
        if (this.activeIndex == 2) {
          return "navbar_slider_2";
        }
        if (this.activeIndex == 3) {
          return "navbar_slider_3";
        }
        if (this.activeIndex == 4) {
          return "navbar_slider_4";
        }
      },
    },
    // created() {
    //   console.log('page index created', this)
    // },
    // mounted() {
    //   console.log('mounted', this)
    // },
    onLoad() {
      this.getDataList();
    },
    // onReady () {
    //   console.log('page index onReady', this)
    // },
    // onShow() {
    //   console.log('onShow', this)
    // },
    // onUnload() {
    //   console.log('onUnload', this)
    // },
    // onHide() {
    //   console.log('onHide', this)
    // },
    methods: {
      tabClick(e) {
        this.activeIndex = e.currentTarget.id;
      },
      async getDataList(){
        this.listData = [];
        let listData = await this.$net.get({url:'video/wheel/list'});
          listData.results.forEach(el => {
              console.log(el);
          });
          console.log('444');
      }
    },
  };
</script>
<style scoped>
  .content {
    box-sizing: border-box;
    height: 100%;
    padding-top: 50px;
    /* overflow: auto; */
    -webkit-overflow-scrolling: touch;
  }

  .swiper-item {
    height: 100%;
    text-align: center;
  }

  .navbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: fixed;
    z-index: 500;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1rpx solid #E85850;
  }

  .navbar_item {
    position: relative;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 13px 0;
    text-align: center;
    font-size: 0;
  }

  .navbar_item .navbar_item_on {
    color: #E85850;
  }

  .navbar_title {
    color: #E85850;
    font-weight: 500;
    display: inline-block;
    font-size: 22px;
    max-width: 8em;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
  }

  .navbar_slider {
    position: absolute;
    content: " ";
    left: 0;
    bottom: 0;
    width: 4em;
    height: 3px;
    background-color: #E85850;
    -webkit-transition: -webkit-transform 0.1s;
    transition: -webkit-transform 0.1s;
    transition: transform 0.1s;
    transition: transform 0.1s, -webkit-transform 0.1s;
  }

  .navbar_slider_0 {
    left: 2rpx;
    transform: translateX(0);
  }

  .navbar_slider_1 {
    left: 29rpx;
    transform: translateX(120rpx);
  }

  .navbar_slider_2 {
    left: 29rpx;
    transform: translateX(270rpx);
  }
  .navbar_slider_3 {
    left: 29rpx;
    transform: translateX(420rpx);
  }
  .navbar_slider_4 {
    left: 29rpx;
    transform: translateX(570rpx);
  }
  .controls {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: fixed;
    z-index: 8888;
    top: 80;
    height: 50px;
    width: 100%;
    background-color: #298de5;
  }
</style>

